<template>
  <div class="my-content">
    <van-nav-bar
      right-text="编辑"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.back()"
      class="nav-bar-fixed"
    >
      <div slot="title">
        <van-search disabled placeholder="请输入搜索关键词" @click="$router.push('/searchsllcontent')"/>
      </div>
    </van-nav-bar>

    <van-tabs v-model="activeName" class="tabs-fixed">
      <van-tab title="收藏" name="a">
        <MyCollect :userId='userId'/>
      </van-tab>
      <van-tab title="评论" name="b" >
        <MyComment :userId='userId'/>
      </van-tab>
      <van-tab title="点赞" name="c"><MyLike :userId='userId'/></van-tab>
      <van-tab title="历史" name="d"><MyHistory :userId='userId'/></van-tab>
      <van-tab title="举报" name="e"><MyReport :userId='userId'/></van-tab>
      <!-- 暂时未开发 -->
      <!-- <van-tab title="推送" name="f">推送</van-tab>
          <van-tab title="预约" name="g">预约</van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import MyCollect from '@/views/User/components/my-collect.vue'
import MyComment from '@/views/User/components/my-comment.vue'
import MyLike from '@/views/User/components/my-like.vue'
import MyHistory from '@/views/User/components/my-history.vue'
import MyReport from '@/views/User/components/my-report.vue'
import {mapGetters} from 'vuex'
export default {
  name: 'my-content',
  components: {
    MyCollect,
    MyComment,
    MyLike,
    MyHistory,
    MyReport
  },
  data () {
    return {
      activeName: 'a'
    }
  },
  created () {
    // console.log(this.userId);
  },
  computed:{
    ...mapGetters(['userId'])
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
::v-deep.van-nav-bar {
  .van-nav-bar__title,
  .van-ellipsis {
    // flex:1;
    width: 80%;
    max-width: 80%;
    font-weight: 400;
    font-size: 14px;
  }
}
::v-deep.nav-search {
  // flex:1;
  // border-radius: 30px;
  // width: 100%;
  // padding: 2px 10px;
  margin: 0 15px;
  // background-color: #ccc;
}
.nav-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

::v-deep.tabs-fixed {
  .van-tabs__wrap {
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
  }
  .van-tabs__content {
    margin-top: 99px;
  }
  .van-tabs__wrap{
    z-index: 999;
  }
}
</style>
